<template>
    <div class="layout">
        <el-container>
            <el-header>
                <div class="info">
                    <img src="../../public/favicon.ico" style="width: 40px; height: 40px;"></img>
                    <span>电子商务平台后台管理系统</span>
                    <el-button type="danger" style="margin-left: 70vw;" @click="logout">退出登录</el-button>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff">
                        <el-menu-item index="1" @click="navigateTo('/welcome')">
                            <el-icon><House /></el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-menu-item index="2" v-if="role=='admin'" @click="navigateTo('/typemanger')">
                            <el-icon><Menu /></el-icon>
                            <span>类型管理</span>
                        </el-menu-item>
                        <el-menu-item index="3" v-if="role=='admin'" @click="navigateTo('/commoditymange')">
                            <el-icon><EditPen /></el-icon>
                            <span>商品管理</span>
                        </el-menu-item>
                        <el-menu-item index="4" v-if="role=='admin'" @click="navigateTo('/ordermange')">
                            <el-icon>
                                <setting />
                            </el-icon>
                            <span>订单管理</span>
                        </el-menu-item>
                        <el-menu-item index="5" v-if="role=='admin'" @click="navigateTo('/ordertotal')">
                            <el-icon><DataLine /></el-icon>
                            <span>销售订单统计</span>
                        </el-menu-item>
                        <el-menu-item index="6" v-if="role=='user'" @click="navigateTo('/myorder')">
                            <el-icon><Avatar /></el-icon>
                            <span>我的订单</span>
                        </el-menu-item>
                        <el-menu-item index="7" v-if="role=='user'" @click="navigateTo('/buy')">
                            <el-icon><CreditCard /></el-icon>
                            <span>购买商品</span>
                        </el-menu-item>
                        <el-menu-item index="8" @click="navigateTo('/car')" v-if="role=='user'">
                            <el-icon><Sell /></el-icon>
                            <span>购物车</span>
                        </el-menu-item>
                        <el-menu-item index="9" @click="navigateTo('/myinfo')" v-if="role=='user'">
                            <el-icon><Tools /></el-icon>
                            <span>个人信息</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const role=localStorage.getItem('userRole')
const navigateTo = (path) => {
    router.push(path);
}
const logout=()=>{
    localStorage.clear();
    router.push('/login')
}
</script>

<style lang="less" scoped>
.el-container {
    height: 100vh;
    width: 100vw;
    padding: 0px;
    .el-header {
        background-color: aqua;
        margin-left: 0px;
        margin-right: 0px;
        padding: 20px;

        .info {
            display: flex;
            align-items: center;

            img {
                margin-right: 10px;
            }

            span {
                font-size: 20px;
                font-weight: 700;
            }
        }
    }

    .el-aside {
        background-color: #545C64;
    }

}
</style>